<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>舆情监控-用户注册</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
    <style>
         .home{
              margin-top: 100px;
         }
         .container {
             width: 1170px;
         }
        .webpper{
            width: 500px;
            margin-left: 320px;
        }
        h2{
            display: block;
            font-size: 1.5em;
            -webkit-margin-before: 0.83em;
            -webkit-margin-after: 0.83em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }
        a{
            color: #333;
            touch-action: manipulation;
            background-color: transparent;
            text-decoration: none;
            outline: none;
            cursor: pointer;
            transition: color .3s;
        }
        .card-m{
            text-align: left;
        }

        .sentiment-prob{
            width: 100px;
            display: inline-block;
            height: 15px;
            line-height: 15px;
            text-align: center;
            color: #fff;
            background: #1a8bd2;
            position: relative;
            margin-bottom: 0;
            vertical-align: middle;
        }
         .sentiment-prob span {
             position: absolute;
             height: 15px;
             width: 30px;
             background: #f5222d;
             left: 0;
             z-index: 0;
         }
         .sentiment-prob em {
             z-index: 2;
             display: block;
             position: absolute;
             font-size: 12px;
             text-decoration: none;
             font-style: normal;
             margin-left: 30%;
         }
        .col-form-label{
            float: left;
        }
    </style>
</head>
<body>
<div class="header-wepper">
    <div class="container text-center">
        <span>首页</span>
        <span><a th:href="@{/scan}">舆情检测</a></span>
        <span>产品服务</span>
        <span>解决方案</span>
        <span>资讯中心</span>
        <span>关于我们</span><span class="px-1"/>|<span class="px-1"/>
        <a shiro:authenticated="" th:href="@{/mem/index}"><shiro:principal property="name"/></a>
        <span class="px-1"/>
        <a shiro:authenticated="" th:href="@{/mem/logout}">退出账户</a>
        <a shiro:notAuthenticated="" th:href="@{/mem/login}" style="color: #007bff">登录</a>
    </div>
</div>
<div class="home">
    <div class="container text-center">
        <div>用户注册</div>
        <div class="card-m">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a id="pern" th:class="${user.type==0?'nav-link active':'nav-link'}" onclick="perShow(this)">个人注册</a>
                </li>
                <li class="nav-item">
                    <a id="corpn" th:class="${user.type==1?'nav-link active':'nav-link'}" onclick="corpShow(this)">企业注册</a>
                </li>
            </ul>
            <form id="rest" th:action="@{/mem/register}" method="post">
                <div class="form-group">
                    <label class="col-form-label"><span style="color: red">*</span> 邮箱:</label>
                    <span class="em-erro" style='color: red;margin-left: 50px;display: none'></span>
                    <input type="text" class="form-control" th:value="${user.email}" name="email">
                </div>
                <input type="hidden" class="form-control" th:value="${user.mobile}" name="mobile">
                <div id="per" style="display: block">
                    <div class="form-group">
                        <label  class="col-form-label"><span style="color: red">*</span> 手机号:</label>
                        <span class="mo-erro" style='color: red;margin-left: 50px;display: none'></span>
                        <input type="text" class="form-control" th:value="${user.mobile}" name="permobile">
                    </div>
                    <div class="form-group">
                        <label  class="col-form-label"><span style="color: red">*</span> 昵称:</label>
                        <span class="na-erro" style='color: red;margin-left: 50px;display: none'></span>
                        <input type="text" class="form-control" th:value="${user.name}" name="name">
                    </div>
                </div>
                <div id="corp" style="display: none">
                    <div class="form-group">
                        <label  class="col-form-label"><span style="color: red">*</span> 负责人手机号:</label>
                        <span class="mo-erro" style='color: red;margin-left: 50px;display: none'></span>
                        <input type="text" class="form-control" th:value="${user.mobile}" name="corpmobile">
                    </div>
                    <div class="form-group">
                        <label  class="col-form-label"><span style="color: red">*</span> 企业名称:</label>
                        <span class="cn-erro" style='color: red;margin-left: 50px;display: none'></span>
                        <input type="text" class="form-control" th:value="${user.companyName}" name="companyName">
                    </div>
                    <div class="form-group">
                        <label  class="col-form-label"><span style="color: red">*</span> 企业电话:</label>
                        <span class="cp-erro" style='color: red;margin-left: 50px;display: none'></span>
                        <input type="text" class="form-control" th:value="${user.companyPhone}" name="companyPhone">
                    </div>
                    <div class="form-group">
                        <label  class="col-form-label"><span style="color: red">*</span> 组织机构代码:</label>
                        <span class="in-erro" style='color: red;margin-left: 50px;display: none'></span>
                        <input type="text" class="form-control" th:value="${user.instituionCode}" name="instituionCode">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-form-label"><span style="color: red">*</span> 密码:</label>
                    <span class="pa-erro" style='color: red;margin-left: 50px;display: none'></span>
                    <input type="password" class="form-control" name="password">
                </div>
                <div class="form-group">
                    <label  class="col-form-label"><span style="color: red">*</span> 确认密码:</label>
                    <span class="pac-erro" style='color: red;margin-left: 50px;display: none'></span>
                    <input type="password" class="form-control" name="passwordConfirm">
                </div>
                <input type="hidden" id="userType" th:value="${user.type}" name="type">
                <div class="form-group">
                    <label  class="col-form-label">邀请码:</label>
                    <input type="text" class="form-control" th:value="${user.invitationCode}" name="invitationCode">
                </div>
                <input type="button" class="btn btn-secondary" value="立即注册">
            </form>
        </div>
        <!-- 模态框 -->
    </div>
</div>

<script th:src="@{/static/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>
<script th:inline="javascript">

    const erro = [[${erro}]];
    if (erro !== '' && erro !== undefined && erro !== null){
        alert(erro);
    }

    $(function () {
        $("input[name='email']").blur(function(){

            $("input[type='button']").unbind("click");

            $("span[class='em-erro']").hide();

            if ($(this).val() === ''){
                $("span[class='em-erro']").text("邮箱不能为空").show();
                return;
            }

            const emialReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if(!emialReg.test($.trim($(this).val()))){
                $("span[class='em-erro']").text("邮箱地址格式不正确").show();
                return ;
            }

            const data = {'email':$(this).val()};
            checkval($("span[class='em-erro']"),data);

        });

        $("input[name='permobile']").blur(function(){

            $("input[type='button']").unbind("click");

            $("span[class='mo-erro']").hide();

            if ($(this).val() === ''){
                $("span[class='mo-erro']").text("手机号不能为空").show();
                return;
            }

            const mbReg = /^1[3,4,7,5,8]\d{9}$/;
            if(!mbReg.test($.trim($(this).val()))){
                $("span[class='mo-erro']").text("手机号码格式不正确").show();
                return;
            }

            const data = {'mobile':$(this).val()};
            checkval($("span[class='mo-erro']"),data);

            $("input[name='mobile']").val($(this).val())
        });

        $("input[name='corpmobile']").blur(function(){

            $("input[type='button']").unbind("click");

            $("span[class='mo-erro']").hide();

            if ($(this).val() === ''){
                $("span[class='mo-erro']").text("手机号不能为空").show();
                return;
            }

            const mbReg = /^1[3,4,7,5,8]\d{9}$/;
            if(!mbReg.test($.trim($(this).val()))){
                $("span[class='mo-erro']").text("手机号码格式不正确").show();
                return;
            }

            const data = {'mobile':$(this).val()};
            checkval($("span[class='mo-erro']"),data);

            $("input[name='mobile']").val($(this).val())
        });

        $("input[name='instituionCode']").blur(function(){

            $("input[type='button']").unbind("click");

            $("span[class='in-erro']").hide();

            if ($(this).val() === ''){
                $("span[class='in-erro']").text("组织机构代码不能为空").show();
                return;
            }

            if (!orgcodevalidate($(this).val())){
                $("span[class='in-erro']").text("组织机构代码格式错误").show();
                return;
            }

            const data = {'instituionCode':$(this).val()};
            checkval($("span[class='in-erro']"),data);
        });

        $("input[name='password']").blur(function(){

            $("input[type='button']").unbind("click");

            $("span[class='pa-erro']").hide();

            if ($(this).val() === ''){
                $("span[class='pa-erro']").text("密码不能为空").show();
                return;
            }

            const pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
            if(!pwdReg.test($(this).val())){
                $("span[class='pa-erro']").text("密码必须是8-16位且含有(小写字母 或 大写字母)、数字").show();
                return;
            }

            const  pc = $("input[name='passwordConfirm']").val();
            if (pc !==''&&$(this).val()!==pc){
                $("span[class='pa-erro']").text("两次密码不一致").show();
                return;
            }

            $("input[type='button']").bind("click",regist);

        });

        $("input[name='passwordConfirm']").blur(function(){

            $("input[type='button']").unbind("click");

            $("span[class='pac-erro']").hide();

            if ($(this).val() === ''){
                $("span[class='pac-erro']").text("确认密码不能为空").show();
                return;
            }

            const pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
            if(!pwdReg.test($(this).val())){
                $("span[class='pac-erro']").text("密码必须是8-16位且含有(小写字母 或 大写字母)、数字").show();
                return;
            }

            const  pc = $("input[name='password']").val();
            if ($(this).val()!==pc){
                $("span[class='pac-erro']").text("两次密码不一致").show();
                return;
            }

            $("input[type='button']").bind("click",regist);

        });

        $("input[type='button']").click(function(){
            regist()
        });

    });
    
    function regist() {
        $("span[class='em-erro']").hide();
        $("span[class='mo-erro']").hide();
        $("span[class='na-erro']").hide();
        $("span[class='cn-erro']").hide();
        $("span[class='cp-erro']").hide();
        $("span[class='in-erro']").hide();
        $("span[class='pa-erro']").hide();
        const email = $("input[name='email']").val();
        const mobile = $("input[name='mobile']").val();
        const name = $("input[name='name']").val();
        const companyName = $("input[name='companyName']").val();
        const companyPhone = $("input[name='companyPhone']").val();
        const instituionCode = $("input[name='instituionCode']").val();
        const password = $("input[name='password']").val();
        const userType = $("#userType").val();

        if (email === ''){
            $("span[class='em-erro']").text("邮箱不能为空").show();
            return;
        }
        if (mobile === ''){
            $("span[class='mo-erro']").text("手机号不能为空").show();
            return;
        }
        if (userType === '0' ){
            if (name === ''){
                $("span[class='na-erro']").text("昵称不能为空").show();
                return;
            }
        }else {
            if (companyName === ''){
                $("span[class='cn-erro']").text("企业名称不能为空").show();
                return;
            }
            if (companyPhone === ''){
                $("span[class='cp-erro']").text("企业电话不能为空").show();
                return;
            }
            if (instituionCode === ''){
                $("span[class='in-erro']").text("组织机构代码不能为空").show();
                return;
            }
        }

        if (password === ''){
            $("span[class='pa-erro']").text("密码不能为空").show();
            return;
        }

        $("#rest").submit();

    }
    
    function checkval(obj,params) {
        $.ajax({
            url:[[@{/mem/valcheck}]],
            data:params,
            type:'post',
            dataType:'json',
            success:function(_data){
                if (_data.code === 'SUCCESS'){
                    obj.hide();
                    $("input[type='button']").bind("click",regist);
                }else {
                    obj.text(_data.content).show();
                    $("input[type='button']").unbind("click");
                }
            }
        });
    }

    function corpShow() {
        $("#rest").find('input[type=text],select,input[type=hidden]').each(function() {
            $(this).val('');
        });
        $("#corpn").addClass("active");
        $("#pern").removeClass("active");
        $("#per").hide();
        $("#corp").show();
        $("#userType").val(1);
    }

    function perShow() {
        $("#rest").find('input[type=text],select,input[type=hidden]').each(function() {
            $(this).val('');
        });
        $("#pern").addClass("active");
        $("#corpn").removeClass("active");
        $("#corp").hide();
        $("#per").show();
        $("#userType").val(0);
    }

    function orgcodevalidate(value){
        if(value!="" && value!=null && value!=undefined){
            if (value.indexOf("v") === -1){
                return false;
            }
            var values=value.split("-");
            var ws = [3, 7, 9, 10, 5, 8, 4, 2];
            var str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            var reg = /^([0-9A-Z]){8}$/;
            if (!reg.test(values[0])) {
                return true;
            }
            var sum = 0;
            for (var i = 0; i < 8; i++) {
                sum += str.indexOf(values[0].charAt(i)) * ws[i];
            }
            var C9 = 11 - (sum % 11);
            var YC9=values[1]+'';
            if (C9 == 11) {
                C9 = '0';
            } else if (C9 == 10) {
                C9 = 'X'  ;
            } else {
                C9 = C9+'';
            }
            return YC9!=C9;
        }
    }

</script>
</body>
</html>